<template>
  <div>
    <el-drawer
      title="歌词"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <div v-for="(item,index) in getParseLyric()" :key="index" style="text-align: center">
        <span style="font-size: 20px;">{{item}}</span>
      </div>
    </el-drawer>
  </div>
</template>


<script>

export default {
  name: "showlyric",
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      lyric: ""
    };
  },

  methods: {
    getParseLyric() {
      let lines = this.lyric.split("\n");
      let pattern  = /\[\d{2}:\d{2}.({\d{3}|\d{2})\]/g;
      let result = [];
      for(let item of lines) {
        let value = item.replace(pattern, '');
        result.push(value);
      }
      console.log(result);
      return result;

    },

    handleClose(done) {
      done();
    }
  }

}
</script>

<style scoped>

</style>
